<template>
  <div>
    <!-- 标题信息栏 -->
    <div class="title-bar">
      <div class="fileName" v-if="inputVisible">
        <p>无标题文档</p>
        <el-icon class="editPen" @click="editFileName()">
          <EditPen/>
        </el-icon>
      </div>

      <div class="fileName" v-else>
        <el-input v-model="inputName" id="InputName" style="width: 240px"/>
        <el-icon class="editPen" @click="inputVisible = true">
          <Check/>
        </el-icon>
      </div>


      <div>
        <el-button type="primary" plain @click="save()">保存</el-button>
        <el-button type="primary" plain @click="share()">分享</el-button>
        <el-button type="primary" plain @click="derive()">导出</el-button>
      </div>
    </div>
    <div id="map"></div>
  </div>
</template>
<script setup>
import MindElixir from "mind-elixir";
import example from "mind-elixir/example";
import {onMounted, ref} from "vue";

const me = ref();
onMounted(() => {
  me.value = new MindElixir({
    el: "#map",
    direction: MindElixir.LEFT,
  });
  const data = MindElixir.new('请输入文本')
  me.value.init(data);
});

// 修改文件名
const inputVisible = ref(true)
const inputName = ref('')
const editFileName = () => {
  inputVisible.value = false
  document.getElementById('InputName').focus()
}

// 保存
const save = () => {
  console.log(me.value)
}

// 分享
const share = () => {

}
// 导出
const derive = () => {

}
</script>
<style lang="less" scoped>
.title-bar {
  width: 96%;
  height: 55px;
  background-color: #eee;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin: 10px 0;

  .fileName {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .editPen {
      margin-left: 10px;
      font-size: 18px;
    }
  }
}

#map {
  width: 99%;
  height: 84vh;
}
</style>
